<template>
	<view class="gui-flex gui-row gui-wrap">
		<view class="gui-add-list-items" style="overflow: hidden;"
			:style="{borderRadius:borderRadius,width:width,height:height}"
			v-for="(item, index) in imgLists.slice(0,showNum)" :key="index">

			<video v-if="type=='video'" :show-play-btn="false" :src="item.url" :data-imgurl="item.url"
				:style="{borderRadius:borderRadius}" class="gui-add-list-img"></video>
			<image @tap="showImgs" v-else :show-play-btn="false" :mode="mode" :src="item.url" :data-imgurl="item.url"
				:style="{borderRadius:borderRadius,width:width,height:height}" class="gui-add-list-img"></image>
		</view>

		<view v-if="!imgLists || imgLists.length==0" class="gui-add-list-items" style="overflow: hidden;"
			:style="{borderRadius:borderRadius,width:width,height:height}">
			<image :show-play-btn="false" :mode="mode" :src="placehoder"
				:style="{borderRadius:borderRadius,width:width,height:height}" class="gui-add-list-img"></image>
		</view>

	</view>
</template>
<script>
	export default {
		name: "hyb-preview",
		props: {
			placehoder: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'image'
			},
			items: {
				type: Array,
				default: function() {
					return [];
				}
			},
			mode: {
				type: String,
				default: 'aspectFit'
			},
			borderRadius: {
				type: String,
				default: "10rpx"
			},

			width: {
				type: String,
				default: "200rpx"
			},

			showNum: {
				type: Number,
				default: 9
			},

			height: {
				type: String,
				default: "200rpx"
			}
		},
		data() {
			return {
				imgLists: []
			}
		},
		created: function() {
			this.initImgs();
		},
		watch: {
			items: function(val) {
				this.initImgs();
			}
		},
		methods: {
			initImgs: function() {
				var imgs = [];
				if (this.items) {
					for (let i = 0; i < this.items.length; i++) {
						imgs.push({
							url: this.items[i],
							progress: 100
						});
					}
				}
				this.imgLists = imgs;
			},
			showImgs: function(e) {
				var currentImg = e.currentTarget.dataset.imgurl;
				var imgs = [];
				for (let i = 0; i < this.imgLists.length; i++) {
					imgs.push(this.imgLists[i].url);
				}
				uni.previewImage({
					urls: imgs,
					current: currentImg
				})
			},
		}
	}
</script>
<style scoped>
	.gui-add-list-btn-text {
		font-size: 26rpx;
		line-height: 36rpx;
		text-align: center;
	}

	.gui-add-list-btn-icon {
		font-size: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}

	.gui-add-list-items {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin: 10rpx;
		font-size: 0;
		position: relative;
	}

	.gui-add-list-img {
		width: 200rpx;
		height: 200rpx;
	}
</style>